<template>
	<div>
		<div class="calendar-container">
			<div class="year">
				<div class="text">
					<span class="fl" @click="lastYear">«</span>
					<span class="fl" @click="lastMonth">‹</span>
					<p class="nowdata">{{ years }}年{{ nowDate.month + 1 }}月</p>
					<span class="fr" @click="nextMonth">›</span>
					<span class="fr" @click="nextYear">»</span>
				</div>
				<div class="days">
					<span>休息日 <i class="restDays"></i></span>
					<span>工作日 <i class="weekDays"></i></span>
				</div>
			</div>
			<ul class="week">
				<li v-for="(o, index) in 7" :key="o">{{ formatWeek(index) }}</li>
			</ul>
			<ul class="date">
				<li class="none-week" v-for="o in lastMonthDays" :key="o + 50">{{ lastMonthStartDay + o - 1 }}</li>
				<li @click="clickEvent(day, $event)" v-for="day in nowMonthDays" :key="day" :class="getClassName.includes(day) ? 'isActive' : calendarDaySelected ? 'disabled none-week' : ''">{{
					day
				}}</li>
				<li class="none-week" v-for="day in 42 - lastMonthDays - nowMonthDays" :key="day + 100">{{ day }}</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
	props: {
		years: {
			type: String,
			require: true,
			default: () => ''
		},
		calendarDaySelected: {
			type: Boolean,
			require: true,
			default: () => false
		},
		showCalendar: {
			type: Boolean,
			require: true,
			default: () => false
		}
	},
	data() {
		return {
			selectDate: [], //选择日期列表
			nowDate: this.getDate(new Date()), //当前设置时间 默认为当前系统时间
			today: '',
			isActive: '',
			checkedDay: [], //选中的数据
			createSelectDays: [] //去重后的数据
		};
	},
	watch: {
		//监听年份变化
		getYears(newValue, oldValue) {
			let selectNowDayByYear = this.saveDates.filter(years => years.year === Number(newValue));
			this.$store.commit('SELECT_NOW_DAY_BY_YEAR', selectNowDayByYear);
		}
	},
	computed: {
		...mapState({
			saveDates: state => state.calendar.saveDates
		}),
		...mapState({
			nowYearDatas: state => state.calendar.nowYearDatas
		}),
		...mapState({
			selectYearDatas: state => state.calendar.selectYearDatas
		}),
		getYears() {
			return this.years;
		},
		lastMonthDays() {
			return this.startWeek();
		},
		lastMonthStartDay() {
			return this.calcLastMonthDays(this.years, this.nowDate.month) - (this.startWeek() - 1);
		},
		nowMonthDays() {
			return this.calcDays(this.years, this.nowDate.month);
		},
		//动态改变样式
		getClassName() {
			let selectDays = [];
			let nowMonth = this.nowDate.month + 1;
			this.nowYearDatas.forEach(item => {
				for (let i = 1; i <= this.nowMonthDays; i++) {
					if (item.year === Number(this.years) && item.month === nowMonth && item.day === i) {
						selectDays.push(item.day);
					}
				}
			});
			this.createSelectDays = [...new Set(selectDays)];
			return this.createSelectDays;
		}
	},
	mounted() {
		this.saveDates = JSON.parse(JSON.stringify(this.saveDates));
	},
	created() {
		if (this.setDate) {
			this.nowDate = this.getDate(this.setDate);
		}
	},
	methods: {
		...mapMutations('calendar', ['SAVE_DATES', 'SELECT_NOW_DAY_BY_YEAR', 'SET_SELECT_YEAR']),
		getDate(date) {
			return {
				year: date.getFullYear(),
				month: date.getMonth(),
				day: date.getDay(),
				date: date.getDate()
			};
		},
		formatWeek(day) {
			switch (day) {
				case 0:
					return '日';
				case 1:
					return '一';
				case 2:
					return '二';
				case 3:
					return '三';
				case 4:
					return '四';
				case 5:
					return '五';
				case 6:
					return '六';
			}
		},
		//判断闰年
		isLeapYear(year) {
			return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
		},
		//根据日子计算星期
		getDayWithDate(year, month, day) {
			return new Date(year, month, day).getDay();
		},
		//计算某年某月的天数
		calcDays(year, month) {
			const monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			if (this.isLeapYear(year) && month === 1) return 29;
			else return monthDay[month];
		},
		//计算上个月天数
		calcLastMonthDays(year, month) {
			if (month === 0) {
				return this.calcDays(year - 1, 11);
			} else {
				return this.calcDays(year, month - 1);
			}
		},
		//上月
		lastMonth() {
			if (Number(this.years) === 2021 && this.nowDate.month + 1 === 1) {
				return;
			}
			let monthNo = this.nowDate.month;
			let month = monthNo === 0 ? 12 : monthNo;
			let selectNowDayByYear = this.saveDates.filter(item => item.year === Number(this.years)).filter(months => months.month === month);
			this.$store.commit('SELECT_NOW_DAY_BY_YEAR', selectNowDayByYear);
			if (this.nowDate.month === 0) {
				this.nowDate.month = 11;
				this.years--;
			} else {
				this.nowDate.month--;
			}
		},
		//下月
		nextMonth() {
			if (Number(this.years) === 2025 && this.nowDate.month + 1 === 12) {
				return;
			}
			if (this.nowDate.month === 11) {
				this.nowDate.month = 0;
				this.years++;
			} else {
				this.nowDate.month++;
			}
			let monthNo = this.nowDate.month;
			let month = monthNo <= 11 ? monthNo + 1 : 0;
			let selectNowDayByYear = this.saveDates.filter(item => item.year === Number(this.years)).filter(curr => curr.month === month);
			this.$store.commit('SELECT_NOW_DAY_BY_YEAR', selectNowDayByYear);
		},
		//去年
		lastYear() {
			if (Number(this.years) === 2021) {
				return;
			}
			this.years--;
			let monthNo = this.nowDate.month;
			let month = monthNo <= 11 ? monthNo + 1 : 0;
			let selectNowDayByYear = this.saveDates.filter(years => years.year === this.years).filter(months => months.month === month);
			this.$store.commit('SELECT_NOW_DAY_BY_YEAR', selectNowDayByYear);
		},
		//下一年
		nextYear() {
			if (Number(this.years) === 2025) {
				return;
			}
			this.years++;
			let monthNo = this.nowDate.month;
			let month = monthNo <= 11 ? monthNo + 1 : 0;
			let selectNowDayByYear = this.saveDates.filter(years => years.year === this.years).filter(months => months.month === month);
			this.$store.commit('SELECT_NOW_DAY_BY_YEAR', selectNowDayByYear);
		},
		//计算当月开始星期
		startWeek() {
			return this.getDayWithDate(this.years, this.nowDate.month, 1);
		},
		//点击日历事件
		clickEvent(day, e) {
			//禁止点击日历
			if (this.calendarDaySelected) {
				return;
			}
			let monthNo = this.nowDate.month;
			let month = monthNo <= 11 ? monthNo + 1 : 0;
			//选中的数据
			let date = {
				year: Number(this.years),
				month: month,
				week: new Date(this.years, this.nowDate.month, e.target.innerText).getDay(),
				day: Number(e.target.innerText)
			};
			if (e.target.className === 'isActive') {
				let arr = [];
				this.saveDates.forEach(item => {
					if (item.year === date.year && item.month === date.month && item.day === date.day) {
						//再次点击删除点击的元素
						arr = this.saveDates.filter(item => item.day !== day);
					}
				});
				this.$store.commit('SAVE_DATES', arr);
			} else {
				this.$store.commit('PUSH_DATES', date);
				this.$store.commit('SAVE_DATES', this.saveDates);
				e.target.className = 'isActive';
			}
			let selectNowDayByYear = this.saveDates.filter(years => years.year === date.year).filter(months => months.month === date.month);
			this.$store.commit('SELECT_NOW_DAY_BY_YEAR', selectNowDayByYear);
			console.log(date.day);
		}
	}
};
</script>

<style scoped>
.restDays {
	height: 9px;
	width: 9px;
	display: inline-block;
	background: #6384fe;
	border-radius: 2px;
}
.weekDays {
	height: 9px;
	width: 9px;
	display: inline-block;
	border: 1px solid #cccccc;
	background: #fff;
	border-radius: 2px;
}

.year .nowdata {
	width: 50%;
	display: inline-block;
}
.active:hover {
	background-color: #6384fe;
	cursor: pointer;
	border-radius: 4px;
	padding: 0;
}
.isActive {
	background-color: #6384fe;
	cursor: pointer;
	border-radius: 4px;
	padding: 0;
	color: #fff;
}

.calendar-container {
	margin: 10px 0px 20px;
	max-width: 380px;
	border: 2px solid #eee;
	position: relative;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}
.calendar-container .disabled {
	pointer-events: none;
}
.year {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 10px;
	height: 30px;
}
.week,
.date {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	background-color: #fff;
	margin-top: 0;
}
.date {
	padding-bottom: 20px;
}
.week {
	/* border-bottom: 0.5px solid #ddd; */
	margin-bottom: 5px;
	background-color: #fff;
	margin-bottom: 0;
}
ul > li {
	font-size: 14px;
	margin: 6px 10px;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #666;
	cursor: pointer;
}
.none-week {
	color: #aaa;
}
.year > .text {
	width: 60%;
	display: flex;
	align-items: center;
	height: 40px;
	overflow: hidden;
}
.year span {
	line-height: 30px;
	font-size: 20px;
	display: inline-block;
	width: 10%;
}
.days span {
	font-size: 12px;
	line-height: 12px;
	display: inline;
	width: 100%;
}
/* .year p {
	width: 50%;
	display: inline-block;
	margin-top: 6px;
} */
.fl {
	float: left;
	cursor: pointer;
}
.fr {
	float: right;
	cursor: pointer;
}
</style>
